---
title: 'Cypress Studio: Build Tests by Interacting with Your App'
description: 'Create, extend, and refine Cypress tests without writing commands by hand.'
sidebar_label: 'Cypress Studio'
e2eSpecific: true
---

<ProductHeading product="app" />

# Cypress Studio

:::info

##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn

- How to generate Cypress tests by interacting with your app
- How to add assertions by right-clicking elements
- How to quickly extend or edit tests without leaving Cypress

:::

## Why Use Cypress Studio

Cypress Studio turns test creation into a natural part of exploring your app.  
Instead of manually typing every `.get()`, `.click()`, or `.type()` command, you can **record interactions in real time**, automatically generate Cypress code, and fine-tune your test inline.

- **Save time**: Skip manually typing `.get().click().type()` sequences
- **Stay in the flow**: Build and extend tests without leaving the Cypress App
- **Boost coverage**: Add new checks to existing tests in seconds

<DocsVideo
  src="/img/app/cypress-studio/cypress-studio-recording-assertions-editing.mp4"
  autoPlay={true}
/>

## 🚀 Quickstart: Try Studio in 60 Seconds

:::success

1. **Run a Spec:**
   Open Cypress and run a spec file
2. **Open Studio:**
   Click Edit in Studio on a test in the Command Log or click Studio Beta in the Studio panel.

3. **Interact & Save:**
   Click, type, and right-click to add assertions. Click Save to save your test.

:::

## How Cypress Studio works

When Studio is enabled, you can:

- **Record:** Interact with your app in the Cypress browser to capture test commands
- **Assert:** Right-click any element to add built-in assertions
- **Edit:** Adjust tests inline without switching tools

Supported action commands include: [`.click()`](/api/commands/click), [`.type()`](/api/commands/type), [`.check()`](/api/commands/check), [`.uncheck()`](/api/commands/uncheck), [`.select()`](/api/commands/select)

### Start Studio

You can start Studio in several ways:

- Click **Edit in Studio** on a test in the Command Log.
- Click **New Test** on the running spec or suite.
- Click **Studio Beta** in the Studio panel.

<DocsVideo
  src="/img/app/cypress-studio/edit-in-studio-button-on-cypress-test.mp4"
  autoPlay={true}
/>

### Record a new test

1. Click **New Test** on the file or suite you want to work in
2. Give your test a clear, descriptive name

Studio will automatically create a new test definition for you.

<DocsVideo
  src="/img/app/cypress-studio/create-new-test-in-suite-with-cypress-studio.mp4"
  autoPlay={true}
/>

### Extend an existing test

:::warning

**Sourcemaps required:** Sourcemaps must be enabled for Studio to load your existing test. See [how to enable sourcemaps](/api/node-events/preprocessors-api#Source-maps) for more information.

:::

You can extend and update existing tests using Cypress Studio.

1. Run the spec in Cypress
2. Hover over the test in the Command Log
3. Click **Edit in Studio**

Studio runs your test up to the last command and lets you keep building from there.

<DocsVideo
  src="/img/app/cypress-studio/cypress-studio-recording-assertions-editing.mp4"
  title="Cypress Studio"
  autoPlay={true}
/>

### Set a URL

Studio needs a `cy.visit()` before it can record. If your test doesn't have one yet, Studio will prompt you to enter a URL so it can start recording.

<DocsVideo
  src="/img/app/cypress-studio/cy-visit-url-in-studio.mp4"
  autoPlay={true}
/>

### Record actions

Record actions by interacting with the application under test.

- **Clicks:** Click buttons, links, or interactive elements
- **Typing:** Enter text into inputs and text areas
- **Selections:** Use dropdowns, checkboxes, and radio buttons

Studio translates your actions into Cypress commands in real time.

<DocsVideo
  src="/img/app/cypress-studio/studio-recording-typing.mp4"
  autoPlay={true}
/>

### Add assertions

Right-click any element in your app to instantly add an assertion.

For example, confirm text is visible, a checkbox is checked, or an element has a specific CSS class. Assertions are added directly in your test code, ready to save and run.

Assertions available are dynamically generated based on the element you right-click.

<DocsVideo
  src="/img/app/cypress-studio/cypress-studio-assertions-demo.mp4"
  autoPlay={true}
/>

## How selectors are chosen

Cypress automatically generates a **unique selector** for each element you interact with, using a priority strategy to ensure accuracy.

<DefaultSelectorPriority />

Want more control? Use the [`Cypress.ElementSelector`](/api/cypress-api/element-selector-api) API to customize selector priority for your project.

## Limitations

- Works only in E2E tests (Component Testing not yet supported)
- Cucumber tests are not yet supported
- Cannot record across [multiple
  origins](/app/guides/cross-origin-testing).
- Recording in iframe is not yet supported
- See issues labeled with [`topic: studio`](https://github.com/cypress-io/cypress/issues?q=is%3Aissue%20state%3Aopen%20label%3A%22topic%3A%20studio%22) for other known issues.

## Coming Soon: AI in Studio

Imagine Studio suggesting the most relevant assertions for every step you take. Cypress AI is a feature that's **coming soon** that will recommend relevant assertions in real time based on your interactions.

<Btn
  label="Join the waitlist ➜"
  variant="indigo-dark"
  className="mr-1"
  href="https://go.cypress.io/studio-ai-waitlist?utm_source=docs.cypress.io&utm_medium=cypress-studio&utm_content=Join-the-waitlist"
/>

<DocsImage
  src="/img/app/cypress-studio/cypress-studio-ai-illustration.gif"
  alt="Cypress AI in Studio generating assertions"
/>

## See also

- [Element Selector API](/api/cypress-api/element-selector-api)
